/* 底部固定 tabbar（适配安全区） */
.enhanced-tabbar {
  height: auto;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.06);
}

/* 内容容器：水平排列 tab 项 */
.tabbar-content {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100rpx;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 每个 tab 项样式 */
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: #999999;
  font-size: 22rpx;
  transition: all 0.18s ease;
  padding: 8rpx 6rpx;
  user-select: none;
  height: 100%;
}

/* 选中态 */
.tabbar-item.active {
  color: $primaryBackground;
}

/* 禁用态 */
.tabbar-item.disabled {
  color: #cccccc;
  pointer-events: none;
}

/* icon 容器 */
.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  // Normal 状态 - 灰色
  filter: grayscale(1) brightness(0.7) opacity(0.8);
}

/* Active 状态的 icon */
.tabbar-item.active .tabbar-icon {
  // Active 状态 - 彩色高亮
  filter: grayscale(0) brightness(1.2) saturate(1.8) opacity(1);
}

/* 文字 */
.tabbar-text {
  font-size: 24rpx;
  line-height: 22rpx;
  font-weight: 500;
}

/* badge 小角标 */
.tabbar-badge {
  position: absolute;
  top: 6rpx;
  right: 18rpx;
}

/* 中间凸起按钮（可选） */
.center-button {
  position: relative;
  margin-top: -20rpx;
  width: 84rpx;
  height: 84rpx;
  background: linear-gradient(180deg, #ff7a64, #ff4a3a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8rpx 28rpx rgba(255, 74, 52, 0.28);
}

/* 小屏优化：当屏幕窄时 text 隐藏，只显示 icon（可选） */
@media (max-width: 320px) {
  .tabbar-text {
    display: none;
  }
}

/* 主题样式示例 */
.enhanced-tabbar.theme-custom {
  background: #1a1a1a;
  border-top-color: #333;

  .tabbar-item {
    color: #888;
  }

  .tabbar-item.active {
    color: #fff;
  }
}
